<template>
  <!-- 顶部导航栏 -->
  <div style="height: 100%; position: relative;">
    <van-tabs v-model="active" swipeable>
      <van-tab :key='channel.id' v-for="channel in channels" :title="channel.name">
        <div class="scroll-wrapper">
          <van-pull-refresh v-model="currentChannel.isLoading" @refresh="onRefresh">
            <van-list
              v-model="currentChannel.loading"
              :finished="currentChannel.finished"
              :error.sync="currentChannel.error"
              finished-text="没有更多了"
              error-text="加载数据失败"
              @load="onLoad"
            >
              <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
              <!-- 三张图效果 -->
              <van-cell v-for="article in currentChannel.articles" :key="article.art_id.toString()">
                <div @click='$router.push("/detail/" + article.art_id.toString())' class="article_item">
                  <h3 class="van-ellipsis">{{article.title}}</h3>
                  <div class="img_box" v-if="article.cover.type === 3">
                    <van-image lazy-load class="w33" fit="cover" :src="article.cover.images[0]"/>
                    <van-image lazy-load class="w33" fit="cover" :src="article.cover.images[1]"/>
                    <van-image lazy-load class="w33" fit="cover" :src="article.cover.images[2]"/>
                  </div>
                  <div class="img_box" v-if="article.cover.type === 1">
                    <van-image lazy-load class="w100" fit="cover" :src="article.cover.images[0]"/>
                  </div>
                  <div class="info_box">
                    <span>{{article.aut_name}}</span>
                    <span>{{article.comm_count}} 评论</span>
                    <span>{{article.pubdate|timeFormat}}</span>
                    <span @click='toggleBox(article.art_id)' class="close">
                      <van-icon name="cross"></van-icon>
                    </span>
                  </div>
                </div>
              </van-cell>
            </van-list>
          </van-pull-refresh>
        </div>
      </van-tab>
    </van-tabs>
    <!-- <more-action :value='isShow' @input='getBoxStatus'></more-action> -->
    <!-- <more-action :value='isShow' @input='isShow=$event'></more-action> -->
    <more-action @action-success='actionSuccess' :articleId='articleId' v-model='isShow'></more-action>
    <!-- 编辑频道 -->
    <edit-channel
      @add-success='addSuccess'
      @delete-success='deleteSuccess'
      :active.sync='active'
      :channels='channels'
      v-model='isEdit'>
    </edit-channel>
    <!-- 频道汉堡图标 -->
    <span @click='isEdit=true' class="bar_btn" slot="nav-right">
      <van-icon name="wap-nav"></van-icon>
    </span>
  </div>
</template>
<script>
import { getChannels, getArticles } from '@/api/channel.js'
import MoreAction from '@/components/MoreAction.vue'
import EditChannel from '@/components/EditChannel.vue'

export default {
  name: 'Home',
  components: {
    MoreAction,
    EditChannel
  },
  data () {
    // 只有再data中提取定义好的属性才是响应式的，如果是后添加的属性就不是响应式的，包括通过计算属性新添加的属性也不是响应式的
    return {
      // 编辑频道状态位控制
      isEdit: false,
      // 当前点中的文章id
      articleId: null,
      // 控制弹窗效果
      isShow: false,
      // 列表数据
      list: [],
      // 所有的频道
      channels: [],
      // loading控制单次加载数据的状态（true表示正在加载）：load事件触发时，自动修改为true
      loading: false,
      // 控制加载完成的状态，需要手动设置为true，表示加载完成
      finished: false,
      // 控制选中第几个选项卡，值表示的是选项卡的索引
      active: 0,
      // 控制下拉刷新的状态
      isLoading: false
    }
  },
  computed: {
    // 千万不要这样写（这是一个大地雷）
    // myChannels () {
    //   // 处理频道和文章列表相关的数据结构
    //   return this.channels.map(item => ({
    //     // 频道id
    //     id: item.id,
    //     // 频道name
    //     name: item.name,
    //     // 频道对应的文章列表
    //     articles: [],
    //     // 列表的加载状态
    //     loading: false,
    //     // 加载完成的标志
    //     finished: false,
    //     // 刷新完成的标志
    //     isLoading: false,
    //     // 获取数据的时间戳
    //     timestamp: Date.now()
    //   }))
    // },
    currentChannel () {
      // 获取当前频道
      return this.channels[this.active]
    }
  },
  methods: {
    addSuccess (channel) {
      // 添加频道
      this.channels.push(channel)
    },
    deleteSuccess (index) {
      // 删除频道
      this.channels.splice(index, 1)
    },
    // getBoxStatus (status) {
    //   this.isShow = status
    // },
    actionSuccess () {
      // 不感兴趣操作成功
      this.isShow = false
      const index = this.currentChannel.articles.findIndex(item => {
        return item.art_id.toString() === this.articleId.toString()
      })
      this.currentChannel.articles.splice(index, 1)
    },
    toggleBox (id) {
      // 控制弹窗的显示
      this.isShow = true
      this.articleId = id.toString()
    },
    async getArticles () {
      // 加载当前频道对应的文章数据
      const ret = await getArticles({
        // 当前频道的id
        channel_id: this.currentChannel.id,
        // 用于分页的时间戳
        timestamp: this.currentChannel.timestamp,
        // 是否置顶（固定为1就行）
        with_top: 1
      })
      // async函数的返回值是Promise实例对象
      return ret.data
    },
    async getChannels () {
      // 加载频道数据
      const ret = await getChannels()
      // 必须整体赋值，这样赋值之后，那么数组子属性也是响应式
      this.channels = ret.data.channels.map(item => ({
        // 频道id
        id: item.id,
        // 频道name
        name: item.name,
        // 频道对应的文章列表
        articles: [],
        // 列表的加载状态
        loading: false,
        // 加载完成的标志
        finished: false,
        // 刷新完成的标志
        isLoading: false,
        // 获取数据的时间戳
        timestamp: Date.now(),
        // 错误提交
        error: false
      }))
    },
    async onRefresh () {
      // 下拉刷新时重新加载数据
      // 重置列表加载状态，使它可以重新加载数据
      // this.finished = false

      // // 加载最新的数据
      // const data = [1, 2, 3, 4, 5]
      // setTimeout(() => {
      //   // this.list = []
      //   // this.list.unshift(...data)
      //   this.list = data
      // }, 1000)

      // // 手动设置列表加载状态为true
      // // this.loading = true
      // // 需要手动触发加载数据的动作（加载数据可能不够一页）
      // this.onLoad()
      // // 控制刷新完成
      // this.isLoading = false
      // ------------------------------------
      // 重置时间戳为最新当前时间
      // this.currentChannel.timestamp = Date.now()
      // // 调用接口获取数据
      // let ret = null
      // try {
      //   ret = await this.getArticles()
      // } catch (e) {
      //   console.log(e)
      //   return this.$toast.fail('刷新失败')
      // }
      // // 控制刷新结束
      // if (ret.results.length > 0) {
      //   // 有数据，覆盖默认的列表
      //   this.currentChannel.articles = ret.results
      //   // 重置状态位
      //   this.currentChannel.finished = false
      //   // 更新时间戳
      //   this.currentChannel.timestamp = ret.pre_timestamp
      //   // 如果不够一页数据，重新加载一页
      //   this.onLoad()
      // } else {
      //   // 没有数据要更新
      //   this.$toast.fail('没有数据要更新')
      // }
      // this.currentChannel.isLoading = false
      // -----------------------------------------
      // 在下拉刷新时需要置空列表
      this.currentChannel.articles = []
      // 时间戳设置为最新事件
      this.currentChannel.timestamp = Date.now()
      // 如果onLoad自动触发，那么loading会自动变成true
      // loading值为true表示list组件监听到列表正在加载
      this.currentChannel.loading = true
      await this.onLoad()
      this.currentChannel.isLoading = false
    },
    async onLoad () {
      // 列表触底一次就要加载一页数据
      // 如果onLoad加载一次数据，不能占满一页，那么会自动再加载一次
      // setTimeout(() => {
      //   // 加载一次数据并添加到数据列表中
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1)
      //   }
      //   // 列表加载完成状态重置
      //   this.loading = false
      //   // 判断加载结束的条件
      //   if (this.list.length >= 40) {
      //     // 加载完成所有的数据
      //     this.finished = true
      //   }
      // }, 1000)
      // ---------------------------
      // 调用接口获取一页新的数据
      let ret = null
      try {
        ret = await this.getArticles()
        // 把输入追加到当前频道关联的文章列表数组中
        this.currentChannel.articles.push(...ret.results)
      } catch (e) {
        // 激发错误提示
        this.currentChannel.error = true
        return this.$toast.fail('加载文章列表数据失败')
      }
      // 列表加载完成状态重置
      this.currentChannel.loading = false
      // 判断列表是否还有更多数据
      if (ret.pre_timestamp) {
        // 还有数据,需要记录下次请求的时间戳
        this.currentChannel.timestamp = ret.pre_timestamp
      } else {
        // 没有数据了
        this.currentChannel.finished = true
      }
    }
  },
  async created () {
    await this.getChannels()
  }
}
</script>
<style scoped lang="less">
.van-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  /deep/ .van-tabs__wrap {
    height: 36px;
    padding-right: 36px;
    .van-tab {
      line-height: 36px;
    }
    .van-tabs__line {
      background-color: #3296fa;
      height: 2px;
    }
  }
  /deep/ .van-tabs__content{
    flex: 1;
    overflow: hidden;
  }
  /deep/ .van-tab__pane{
    height: 100%;
    .scroll-wrapper{
      height: 100%;
      overflow-y: auto;
    }
  }
}
.bar_btn {
  width: 36px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 0;
  &::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
    box-shadow: 0 0 10px #999;
    transform: scale(1, 0.6);
  }
  .van-icon-wap-nav {
    width: 100%;
    height: 100%;
    background: #fff;
    text-align: center;
    line-height: 35px;
    position: relative;
    z-index: 1000;
    &::before {
      font-size: 20px;
    }
  }
}
.article_item {
  h3{
    font-weight: normal;
    line-height: 2;
  }
  .img_box{
    display: flex;
    justify-content: space-between;
    .w33{
      width: 33%;
      height: 90px;
    }
    .w100{
      width: 100%;
      height: 180px;
    }
  }
  .info_box{
    color: #999;
    line-height: 2;
    position: relative;
    font-size: 12px;
    span {
      padding-right: 10px;
      &.close{
        border: 1px solid #ddd;
        border-radius: 2px;
        line-height: 15px;
        height: 12px;
        width: 16px;
        text-align: center;
        padding-right: 0;
        font-size: 8px;
        position: absolute;
        right: 0;
        top: 7px;
      }
    }
  }
}
</style>
